<template>
  <div>
    <van-back-top right="10vw" bottom="10vh" />
    <van-floating-bubble v-model:offset="offset" axis="xy" icon="chat" @click="router.push('aichat')" />
    <van-sticky>
      <div class="top">
        <div style="width:100px" @click="router.push('/positioning')">
          <van-icon style="font-size: 1.25rem" name="location-o" />
          <span>{{ address }}</span>
        </div>
        <div style="font-size: 1.2rem">
          装修匠
        </div>
        <div style="width:100px;text-align:right">
          <van-icon style="font-size: 1.25rem" name="search" @click="router.push('/search')" />
        </div>
      </div>
    </van-sticky>
    <div class="carousel">
      <div class="carouselimg">
        <van-swipe type="card" :height="156" :autoplay="3000" :loop="true">
          <van-swipe-item :default="index" v-for="(item, index) in imglist" :key="index">

            <img :src="item" alt="" style="width:100%;height:100%">

          </van-swipe-item>
        </van-swipe>
      </div>
      <div style="margin-top: 0.5rem;" @click="router.push('/announcement')">
        <van-notice-bar left-icon="volume-o" text="系统公告:无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
      </div>
    </div>
    <div class="cate">
      <div>
        <div class="img" style="background-color: #0000ff;">
          <img src="../static/imgs/Hydropower.png" alt="">
        </div>
        水电工
      </div>
      <div>
        <div class="img" style="background-color: #ffcc33;">
          <img src="../static/imgs/woodworking.png" alt="">
        </div>
        木工
      </div>
      <div>
        <div class="img" style="background-color: #ff6600;">
          <img src="../static/imgs/paint.png" alt="">
        </div>
        油漆工
      </div>
      <div>
        <div class="img" style="background-color: #00ff99; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);"><img
            src="../static/imgs/main.png" alt=""></div>
        更多
      </div>
    </div>
    <div>
      <div
        style="display: flex;justify-content: space-between;align-items: center;margin:1rem 0;box-sizing: border-box;padding: 0 0.5rem;">
        <span
          style="box-sizing: border-box;font-size: 1.1rem;font-weight: bold; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);">金牌师傅</span>
        <span>全部 ></span>
      </div>
      <div style="display: flex;width:100%;overflow: auto; white-space: nowrap;scrollbar-width: none; ">
        <div
          style="width:11.5rem;height:11.5rem;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);margin: 0 0.5rem 1rem 0;border-radius:10px;box-sizing: border-box;padding: 0.5rem;"
          v-for="item in dataList" :key="item._id">
          <div style="display: flex;justify-content: space-between;">
            <img src="https://img1.baidu.com/it/u=3799915504,4222345442&fm=253&fmt=auto&app=138&f=PNG?w=500&h=271"
              style="width:50px;height:50px;border-radius:50%;margin: 0 5px;" alt="">
            <div>
              <div>{{ item.name }}</div>
              <div style="font-size: 0.7rem;margin-top:0.4rem">地址：{{ item.expectationaddress[0] }}</div>
            </div>
            <div>
              <div style="font-size:0.8rem;background:#d3e3fd;color:blue;padding:3px;font-size:0.75rem">
                {{ item.worklist[0] }}</div>
            </div>
          </div>
          <div class="content-4">
            {{ item.personalsituation }}
          </div>
          <van-button plain type="primary" style="height:2rem;width:100%;margin-top:0.5rem"><van-icon
              name="phone-o" />联系师傅</van-button>
        </div>
      </div>
      <div>
        <div
          style="display: flex;justify-content: space-between;align-items: center;margin:1rem 0;box-sizing: border-box;padding: 0 0.5rem;">
          <span
            style="box-sizing: border-box;font-size: 1.1rem;font-weight: bold; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);">找活信息</span>
          <span>全部 ></span>
        </div>
        <van-sticky :offset-top="40">
          <div style="display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;">
            <div style="flex:2;text-align:center;font-size: 0.94rem;background:#ffffff;line-height:3rem"
              @click="addressShow = true">
              {{ selAddress || '不限' }}
            </div>
            <van-dropdown-menu style="flex:4">
              <van-dropdown-item v-model="worker" :options="workerList" @close="getData" />
              <van-dropdown-item v-model="distance" :options="distanceList" @close="getData" />
            </van-dropdown-menu>
          </div>
        </van-sticky>
        <van-popup v-model:show="addressShow" position="bottom" :style="{ height: '50%' }">
          <van-area title="请选择" :area-list="areaList" v-model="selAddressCode" :columns-num="2"
            @cancel="addressShow = false" @confirm="onAddressClick" />
        </van-popup>
        <div style="padding:1rem 0;margin-bottom:5rem;box-sizing: border-box;padding: 0 0.5rem;">
          <div v-for="item in dataList" :key="item._id"
            style="margin:0.7rem 0;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);margin-bottom:1.5rem"
            @click="router.push('/detail?id=' + item._id)">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div style="display: flex;">
                <img :src="item.img" style="width:50px;height:50px;border-radius:50%;margin: 0 5px;" alt="">
                <div>
                  <div>{{ item.name }}</div>
                  <div style="font-size: 0.7rem;margin-top:0.4rem">地址：{{ item.expectationaddress[0] }}</div>
                </div>
              </div>
              <van-button plain type="primary" style="height:1.5rem;margin-top:0.5rem"><van-icon
                  name="phone-o" />联系师傅</van-button>
            </div>
            <div class="content-2">
              {{ item.personalsituation }}
            </div>
            <div style="display: flex;justify-content: space-between;">
              <ul>
                <li v-for="i in item.worklist" :key="i"
                  style="display: inline-block;padding:0.3rem;font-size:0.8rem;background:#d3e3fd;color:blue;margin:0 5px 5px 5px">
                  {{ i }}</li>
              </ul>
              <div>
                <van-icon style="font-size: 1.25rem" name="location-o" />
                <span style="color:#b9b9b9">距离你{{ item.distance }}km</span>
              </div>
            </div>
          </div>
          <van-empty image="search" description="暂无数据" v-if="dataList.length == 0" />
          <van-list v-else v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          </van-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useStore } from '../store';
import { useRouter } from 'vue-router';
import { areaList } from '@vant/area-data';
import axios from "../request/request.ts"
const router = useRouter();
const store = useStore();
const address = computed(() => store.address)
const dataList = ref([])
const recommendList = ref([])
//触底加载
const loading = ref(false);
const finished = ref(false);
const pageSize = ref(5)
const currentPage = ref(1)
const onLoad = () => {
  currentPage.value += 1
  getData()
};
const getData = async () => {
  //加载状态开始
  loading.value = true;
  const { data } = await axios.post(`/getWorker`, {
    currentPage: currentPage.value,    //页码
    pageSize: pageSize.value,          //页数
    selAddress: selAddress.value,      //地址
    worker: worker.value,              //0不限 工种
    distance: distance.value           //0为默认 1距离最近 2距离最远
  })
  if (data.code == 200) {
    dataList.value = data.data
    // 加载状态结束
    loading.value = false;
  }
  // 数据全部加载完成
  if (dataList.value.length >= data.total) {
    finished.value = true;
  }
}
onMounted(() => {
  getData()
})
const imglist = [
  'https://img1.baidu.com/it/u=1642188177,3521111596&fm=253&fmt=auto&app=138&f=JPEG?w=923&h=500',
  'https://img1.baidu.com/it/u=1284973271,586781227&fm=253&fmt=auto&app=138&f=JPEG?w=923&h=500',
  'https://img1.baidu.com/it/u=3799915504,4222345442&fm=253&fmt=auto&app=138&f=PNG?w=500&h=271',
  'https://img1.baidu.com/it/u=3910494097,1974763804&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=271'
]
const selAddressCode = ref(0);
const selAddress = ref(0);
const worker = ref('全部');
const distance = ref(0);
const workerList = [
  { text: '全部', value: '全部' },
  { text: '木工', value: '木工' },
  { text: '电工', value: '电工' },
  { text: '装修工', value: '装修工' },
  { text: '油漆工', value: '油漆工' },
];
const distanceList = [
  { text: '默认排序', value: 0 },
  { text: '距离最近', value: 1 },
  { text: '距离最远', value: 2 },
];
const offset = ref({ x: -10, y: 600 });

const addressShow = ref(false);
const onAddressClick = () => {
  selAddress.value = areaList.city_list[selAddressCode.value]
  addressShow.value = false
  getData()
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem;
  background: white;
}

.cate {
  display: flex;
  justify-content: space-around;
  text-align: center;

  img {
    width: 25px;
    height: 25px;
  }

  .img {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 5px;
  }
}

.carousel {
  box-sizing: border-box;
  padding: 0 0.5rem;
}

.content-4 {
  font-size: 0.8rem;
  margin-top: 0.4rem;
  box-sizing: border-box;
  padding: 0 5px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: calc(0.8rem * 4 + 1rem);
}

.content-2 {
  font-size: 0.8rem;
  margin-top: 0.4rem;
  box-sizing: border-box;
  padding: 0 5px;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: calc(0.8rem * 4 + 1rem);
  line-height: 1.5rem;
}
</style>
